class ImageElement extends Element {
  constructor(layoutNode, context) {
    super(layoutNode, context)
    this.image = null
  }

  draw() {
    let { react, style } = this.layoutNode
    let radius = style.borderRadius

    if (radius.endsWith('px')) {
      radius = parseFloat(radius)
      this.drawCircleReact(radius)
    } else if (radius.endsWith('50%')) { // todo .....
      radius = parseFloat(radius)
      this.drawCircle(react.width * (radius / 100))
    } else {
      this.ctx.drawImage(this.layoutNode.ele, react.left, react.top, react.width, react.height)
    }
  }
  /*  绘制圆形图片
   *  参数说明
   *  img 图片地址
   *   x  x轴坐标
   *   y  y轴坐标
   *   r  圆形半径
   */
  drawCircle(r) {
    let { react, style } = this.layoutNode
    let x = react.left
    let y = react.top

    this.ctx.save()
    let d = r * 2
    let cx = x + r
    let cy = y + r
    this.ctx.arc(cx, cy, r, 0, 2 * Math.PI)
    this.ctx.strokeStyle = '#FFFFFF' // 设置绘制圆形边框的颜色
    this.ctx.stroke() // 绘制出圆形，默认为黑色，可通过 ctx.strokeStyle = '#FFFFFF'， 设置想要的颜色
    this.ctx.clip()
    this.ctx.drawImage(this.layoutNode.ele, x, y, d, d)
    this.ctx.restore()
    // this.ctx.drawImage(this.layoutNode.ele, react.left, react.top, react.width, react.height)
  }
  /*绘制圆角矩形
   *  参数说明
   *   x  x轴坐标
   *   y  y轴坐标
   *   w  宽度
   *   h  高度
   *   r  弧度大小
   */
  drawCircleReact(r) {
    let { react } = this.layoutNode
    let x = react.left
    let y = react.top
    let w = react.width
    let h = react.height

    // this.layoutNode.ele = new Image()
    // this.layoutNode.ele.src = this.layoutNode.src
    // this.layoutNode.ele.onload = () => {
      this.ctx.save()
      this.ctx.beginPath()
      // 左上角
      this.ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI)
      this.ctx.moveTo(x + r, y)
      this.ctx.lineTo(x + w - r, y)
      this.ctx.lineTo(x + w, y + r)
      // 右上角
      this.ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
      this.ctx.lineTo(x + w, y + h - r)
      this.ctx.lineTo(x + w - r, y + h)
      // 右下角
      this.ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI)
      this.ctx.lineTo(x + r, y + h)
      this.ctx.lineTo(x, y + h - r)
      // 左下角
      this.ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI)
      this.ctx.lineTo(x, y + r)
      this.ctx.lineTo(x + r, y)

      this.ctx.fillStyle = 'rgb(0,0,0)'
      this.ctx.fill()
      this.ctx.closePath()
      this.ctx.clip()

      this.ctx.drawImage(this.layoutNode.ele, x, y, w, h)
      this.ctx.restore()
    // }
  }
}
